<template>
	<view class="container">
		<!-- 轮播图 -->
		<uni-swiper-dot :info="swiperList" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change" autoplay interval="3000">
				<swiper-item v-for="(item ,index) in swiperList" :key="index">
					<image :src="item.imageUrl" class="swiper-image"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 介绍 -->
		<view class="introduct">
			<view class="name">
				<text>伟业汽车修理中心</text>
			</view>
			<view class="assessment">
				<u-rate :count="count" v-model="value" activeColor="gold" inactiveColor="gainsboro"></u-rate>
				<text>{{value}}分</text>
				<text>销量：322</text>
			</view>
			<view class="time">
				营业时间：周一至周五 09:00-22:00
			</view>
			<view class="place">
				山阳区人民中路32号
				<uni-icons @click="toNavigate" color="#3082FB"  type="paperplane-filled" size="30"></uni-icons>
			</view>

		</view>
		<!-- 服务项目 -->
		<view class="project">
			<view class="title1">
				服务项目
			</view>
			<view class="proItemView">
				<view class="pro">
					<view>工时价格（每小时）</view>
					<view class="money">
						<text>￥ 199</text>
						<text>￥ 299</text>
					</view>
				</view>
				<view class="pro">
					<view>轮胎</view>
					<view class="money">
						<text>￥ 199</text>
						<text>￥ 299</text>
					</view>
				</view>
				<view class="pro">
					<view>----</view>
					<view class="money">
						<text>￥ 199</text>
						<text>￥ 299</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 服务评价 -->
		<view class="serve">
			<view class="title1">
				服务项目
			</view>
			<view class="photo">
				<image src="/static/tuanzi/girl.jpeg"></image>
				<view class="info">
					<view class="one">
						<u--text mode="name" text="张三三" format="encrypt"></u--text>
						<u--text mode="date" text="1612959739"></u--text>
					</view>
					<view class="two">
						<u-rate :count="count0" v-model="value0" activeColor="gold" inactiveColor="gainsboro"></u-rate>
					</view>
				</view>
			</view>
			<view class="evaluate">
				服务评价服务内容服务态度
			</view>
		</view>


		<!-- 按钮 -->
		<u-button type="primary" @click="toyuyue" size="large" shape="circle" text="立即预约"></u-button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
						imageUrl: '/static/tuanzi/store1.jpg'
					},
					{
						imageUrl: '/static/tuanzi/store1.jpg'
					},
					{
						imageUrl: '/static/tuanzi/store1.jpg'
					}
				],
				current: 0,
				mode: 'round',
				count: 5,
				value: 3,
				count0: 5,
				value0: 3,
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',


			}
		},

		methods: {
			// 轮播图
			change(e) {
				this.current = e.detail.current;
			},
			//跳转导航页面
			toNavigate(){
				uni.navigateTo({
					url:'/pages/lly/navigation/navigation'
				})
			},
			toyuyue(){
				uni.navigateTo({
					url:'/pages/lly/yuyue/yuyue'
				})
			}

		}
	}
</script>

<style scoped>
	.container {
		background-color: white;
	}

	.swiper-box {
		height: 420rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.introduct {
		font-family: Arial;
		font-size: 28rpx;
		padding: 20rpx;
	}

	.name {
		font-size: 30rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
	}

	.assessment {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		font-size: 26rpx;
		width: 400rpx;
	}

	.time {
		margin: 10rpx 0;
	}

	.project {
		padding: 0 20rpx;
		font-family: Arial, Helvetica, sans-serif;
	}

	.title1 {
		font-size: 30rpx;
		font-weight: 700;
	}

	.proItemView {
		padding: 40rpx;

	}

	.pro {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-content: center;
		line-height: 70rpx;
		border-bottom: 3rpx solid #cdd1d3aa;
		height: 70rpx;
		margin-top: 10rpx;


	}

	.pro .money text:nth-child(2) {
		text-decoration: line-through;
		color: red;
		margin-left: 20rpx;
	}

	.serve {
		width: 100%;
		/* height: 300rpx; */
		/* background-color: burlywood; */
		padding: 20rpx;
		/* display: flex; */



	}

	.photo {
		/* background-color: cadetblue; */
		display: flex;
		flex-wrap: nowrap;
		margin: 10rpx 0;
	}

	.photo image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.photo .info{
		width: 500rpx;
		margin: 5rpx 20rpx;
	}
	.photo .one{
		display: flex;
		flex-wrap: wrap;
		/* background-color: aquamarine; */
	}
	.evaluate{
		margin-left: 90rpx;
	}
	
</style>